<template>
  <el-form ref="form" :rules="accountRules" :model="form" label-width="120px" class="form">
    <el-form-item label="密码" prop="password">
      <el-input ref="password" v-model="form.password" :type="passwordType" />
      <span class="show-pwd" @click="showPwd">
        <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
      </span>
    </el-form-item>
    <el-form-item label="新密码" prop="new_password">
      <el-input ref="new_password" v-model="form.new_password" :type="passwordType" />
      <span class="show-pwd" @click="showPwd">
        <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
      </span>
    </el-form-item>
    <el-form-item label="确认密码" prop="password_confirmation">
      <el-input ref="password_confirmation" v-model="form.password_confirmation" :type="passwordType" />
      <span class="show-pwd" @click="showPwd">
        <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
      </span>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">修改</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: ''
        }
      }
    }
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度不能低于6位'))
      } else {
        callback()
      }
    }
    const validatePassCon = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度不能低于6位'))
      } else {
        if (value !== this.form.new_password) {
          callback(new Error('重复密码不一致'))
        } else {
          callback()
        }
      }
    }
    return {
      headers: undefined,
      dialogVisible: false,
      form: {
        password: '',
        new_password: '',
        password_confirmation: ''
      },
      passwordType: 'password',
      accountRules: {
        password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
        new_password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
        password_confirmation: [
          { required: true, trigger: 'blur', validator: validatePassCon }
        ]
      }
    }
  },
  mounted() {
    this.getHeaders()
    if (this.form.password === '') {
      this.$refs.password.focus()
    } else if (this.form.new_password === '') {
      this.$refs.new_password.focus()
    } else if (this.form.password_confirmation === '') {
      this.$refs.password_confirmation.focus()
    }
  },
  methods: {
    getHeaders() {
      this.headers = { Authorization: 'Bearer ' + getToken() }
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$store
            .dispatch('user/updateMe', this.form)
            .then(() => {
              this.$message.success('密码更新成功')
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.form{
  width:500px
}
.el-upload .el-upload--text {
  border: 1px solid rgb(141, 137, 137);
}
.avatar-uploader .el-upload {
  border: 1px dashed #2e1d1d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.show-pwd {
  position: absolute;
  right: 10px;
  /* top: 7px; */
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  user-select: none;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
